<template>
  <el-dialog
   
    v-model="dialogVisible"
    width="30%"
    :before-close="handleClose"
    style="color: white; background-color: #124874b8;border: 5px solid #a1bf39"
  >
    <h1 style="color: white">订单详情</h1>
    <img :src=bookcover alt="" style="width: 28%;
    margin-bottom: -48%;
    margin-left: 71%;">
    <h2 style="color: white; text-align: left">
      订单号:{{ order.orderFormId }}
    </h2>
    <h2 style="color: white; text-align: left">订单书籍：{{ bookname }}</h2>

    <h2 style="color: white; text-align: left">用户账号：{{ order.userId }}</h2>
    <h2 style="color: white; text-align: left">
      订单书籍数量：{{ order.totalNum }}
    </h2>
    <h2 style="color: white; text-align: left">
      订单书籍总价格：{{ order.totalMoney }}
    </h2>

    <h2 style="color: white; text-align: left">订单状态：{{ order.state }}</h2>
    <h2 style="color: white; text-align: left">
      购买时间：{{ order.orderDate }}
    </h2>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
      class="sure"
        type="primary"
        @click="dialogVisible = false"
        
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "Orderdetail",
  data() {
    return {
      dialogVisible: false,
      order: {},
      bookname: "",
      bookcover:''
    };
  },
  methods: {
    getbookname() {
      var data = new FormData();
      data.append("bookId", this.order.bookId);
      this.$axios.post("/getbookname", data).then((resp) => {
        console.log(resp.data);
        this.bookname = resp.data;
      });
    },
    getbookcover() {
      var data = new FormData();
      data.append("bookId", this.order.bookId);
      console.log(this.order);
      this.$axios.post("/getbookcover", data).then((resp) => {
        console.log(resp.data);
        this.bookcover = resp.data;

      });
    },
  },
  mounted:function(){
   
  }
};
</script>
<style scoped>
.sure:hover{
  background-color:  #a1bf39;

}
.sure{
  background-color: rgb(57 175 191 / 48%);
}
</style>